<template>
  <div class="scroll demo-tree">
    <example-card title="树形控件" url="http://element.eleme.io/#/zh-CN/component/tree">
      <div>
        <el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick" />
      </div>
      <div>
        <el-tree
            :props="props1"
            :load="loadNode"
            lazy
            show-checkbox
        >
        </el-tree>
      </div>
      <div>
        <el-tree
            :data="data1"
            show-checkbox
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button
                  type="text"
                  size="mini"
                  @click="() => append(data)"
              >
                Append
              </el-button>
              <el-button
                  type="text"
                  size="mini"
                  @click="() => remove(node, data)"
              >
                Delete
              </el-button>
            </span>
          </span>
        </el-tree>
      </div>
    </example-card>
  </div>
</template>

<script>
  let id = 1000;
  const data = [{
    id: 1,
    label: "一级 1",
    children: [{
      id: 4,
      label: "二级 1-1",
      children: [{
        id: 9,
        label: "三级 1-1-1"
      }, {
        id: 10,
        label: "三级 1-1-2"
      }]
    }]
  }, {
    id: 2,
    label: "一级 2",
    children: [{
      id: 5,
      label: "二级 2-1"
    }, {
      id: 6,
      label: "二级 2-2"
    }]
  }, {
    id: 3,
    label: "一级 3",
    children: [{
      id: 7,
      label: "二级 3-1"
    }, {
      id: 8,
      label: "二级 3-2"
    }]
  }];

  export default {
    name: "grids_tree_view",
    data() {
      return {
        data: [{
          label: "一级 1",
          children: [{
            label: "二级 1-1",
            children: [{
              label: "三级 1-1-1"
            }]
          }]
        }, {
          label: "一级 2",
          children: [{
            label: "二级 2-1",
            children: [{
              label: "三级 2-1-1"
            }]
          }, {
            label: "二级 2-2",
            children: [{
              label: "三级 2-2-1"
            }]
          }]
        }, {
          label: "一级 3",
          children: [{
            label: "二级 3-1",
            children: [{
              label: "三级 3-1-1"
            }]
          }, {
            label: "二级 3-2",
            children: [{
              label: "三级 3-2-1"
            }]
          }]
        }],
        defaultProps: {
          children: "children",
          label: "label"
        },
        props1: {
          label: "name",
          children: "zones",
          isLeaf: "leaf"
        },
        data1: JSON.parse(JSON.stringify(data)),
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      },
      loadNode(node, resolve) {
        if (node.level === 0) {
          return resolve([{ name: "region" }]);
        }
        if (node.level > 1) {
          return resolve([]);
        }
        setTimeout(() => {
          const data = [{
            name: "leaf",
            leaf: true
          }, {
            name: "zone"
          }];

          resolve(data);
        }, 500);
      },
      append(data) {
        const newChild = { id: id++, label: "testtest", children: [] };
        if (!data.children) {
          this.$set(data, "children", []);
        }
        data.children.push(newChild);
      },
      remove(node, data) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },
    }
  };
</script>

<style scoped>
  .demo-tree .leaf {
    width: 20px;
    background: #ddd
  }

  .demo-tree .folder {
    width: 20px;
    background: #888
  }

  .demo-tree .buttons, .demo-tree .filter-tree {
    margin-top: 20px
  }

  .demo-tree .custom-tree-container {
    display: -ms-flexbox;
    display: flex;
    margin: -24px
  }

  .demo-tree .block {
    -ms-flex: 1;
    flex: 1;
    padding: 8px 24px 24px
  }

  .demo-tree .block > p {
    text-align: center;
    margin: 0;
    line-height: 4
  }

  .demo-tree .block:first-child {
    border-right: 1px solid #eff2f6
  }

  .demo-tree .custom-tree-node {
    -ms-flex: 1;
    flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px
  }
</style>
